<%- include('layout/header', { title: '微博 - 注册' , isNarrow: true })%>

    <h1>注册</h1>
    <% if (locals.isLogin) { %>
        <p>
            <%= locals.userName%> 您已成功登录，请直接访问<a href="/">首页</a>
        </p>
        <% } else { %>
            <form>
                <div class="form-group">
                    <input type="text" class="form-control" id="input-username" placeholder="请输入用户名">
                    <small id="span-username-info" class="form-text text-muted"></small>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="input-password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="input-password-repeat" placeholder="重新输入密码">
                    <small id="span-password-repeat-info" class="form-text text-muted"></small>
                </div>
                <div class="form-group">
                    <select class="form-control" id="select-gender">
                        <option value="1">男</option>
                        <option value="2">女</option>
                        <option value="3">保密</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary" id="btn-submit">注册</button>
                &nbsp;
                <a href="/login">已有账号，返回登录>></a>
            </form>

            <script>
                $(function () {
                    var $inputUserName = $('#input-username')
                    var $spanUserNameInfo = $('#span-username-info')
                    var $inputPassword = $('#input-password')
                    var $inputPasswordRepeat = $('#input-password-repeat')
                    var $spanPasswordRepeatInfo = $('#span-password-repeat-info')
                    var $selectGender = $('#select-gender')
                    var userNameTimeoutId
                    var passwordTimeoutId
                    var isPasswordSame = false // 默认两次密码不一致
                    var isUserNameExist = true // 默认用户名已存在

                    // 监听用户名输入
                    $inputUserName.on('input', function () {
                        // 做一个简单的防抖
                        if (userNameTimeoutId) {
                            clearTimeout(userNameTimeoutId)
                        }
                        userNameTimeoutId = setTimeout(function () {
                            // 判断用户名是否已存在
                            var userName = $inputUserName.val()
                            ajax.post('/api/user/isExist', {
                                userName
                            }, function (err, data) {
                                $spanUserNameInfo.show()
                                if (err) {
                                    $spanUserNameInfo.text('用户名可用')
                                    isUserNameExist = false
                                } else {
                                    $spanUserNameInfo.text('用户名已存在！')
                                    isUserNameExist = true
                                }
                            })
                        }, 500)
                    })

                    // 监听验证密码输入
                    $inputPasswordRepeat.on('input', function () {
                        // 做一个简单的防抖
                        if (passwordTimeoutId) {
                            clearTimeout(passwordTimeoutId)
                        }
                        passwordTimeoutId = setTimeout(function () {
                            var password = $inputPassword.val()
                            var passwordRepeat = $inputPasswordRepeat.val()
                            $spanPasswordRepeatInfo.show()
                            if (password === passwordRepeat) {
                                $spanPasswordRepeatInfo.text('两次密码一致')
                                isPasswordSame = true
                            } else {
                                $spanPasswordRepeatInfo.text('两次密码不一致！')
                                isPasswordSame = false
                            }
                        }, 500)
                    })

                    // 注册事件
                    $('#btn-submit').click(function (e) {
                        // 阻止默认的提交表单行为
                        e.preventDefault()

                        // 验证
                        if (isUserNameExist) {
                            alert('用户名已存在')
                            return
                        }
                        if (!isPasswordSame) {
                            alert('两次密码不一致')
                            return
                        }

                        var userName = $inputUserName.val()
                        var password = $inputPassword.val()
                        var gender = parseInt($selectGender.val())

                        // 提交数据
                        ajax.post('/api/user/register', {
                            userName,
                            password,
                            gender
                        }, function (err, data) {
                            if (err) {
                                alert(err)
                                return
                            }
                            alert('注册成功，请登录')
                            location.href = '/login'
                        })
                    })
                })
            </script>
            <% } %>

                <%- include('layout/footer')%>